<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能家居控制面板</title>
    <style>
        /* --- 全局样式 --- */
        :root {
            --primary-color: #007bff;
            --primary-hover-color: #0056b3;
            --background-color: #f4f7f9;
            --card-background-color: #ffffff;
            --text-color: #333;
            --border-color: #e0e0e0;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--background-color);
            margin: 0;
            padding: 0;
            color: var(--text-color);
        }

        /* --- 顶部导航栏 --- */
        .navbar {
            background-color: var(--card-background-color);
            box-shadow: var(--shadow);
            padding: 0 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .nav-button {
            padding: 15px 25px;
            border: none;
            background-color: transparent;
            color: var(--text-color);
            font-size: 1em;
            cursor: pointer;
            transition: color 0.3s, border-bottom 0.3s;
            border-bottom: 3px solid transparent;
        }

        .nav-button:hover {
            color: var(--primary-color);
        }

        .nav-button.active {
            color: var(--primary-color);
            border-bottom: 3px solid var(--primary-color);
            font-weight: bold;
        }

        /* --- 页面容器和内容页 --- */
        .container {
            padding: 20px;
            max-width: 900px;
            margin: 20px auto;
        }

        .page {
            display: none; /* 默认隐藏所有页面 */
            animation: fadeIn 0.5s;
        }

        .page.active {
            display: block; /* 只显示激活的页面 */
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* --- 卡片/模块样式 --- */
        .module {
            background-color: var(--card-background-color);
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 25px;
            margin-bottom: 20px;
        }

        .module-title {
            font-size: 1.5em;
            font-weight: 600;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }

        /* --- 通用控件样式 --- */
        .control-item, .sensor-data, .status-item {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 1.1em;
        }

        .control-item label, .status-item span:first-child {
            font-weight: 500;
        }

        button {
            padding: 10px 20px;
            border: none;
            background-color: var(--primary-color);
            color: white;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s, box-shadow 0.3s;
        }

        button:hover {
            background-color: var(--primary-hover-color);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .slider {
            -webkit-appearance: none;
            width: 50%;
            height: 8px;
            background: #d3d3d3;
            outline: none;
            opacity: 0.7;
            transition: opacity .2s;
            border-radius: 5px;
        }
        .slider:hover { opacity: 1; }
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 22px;
            height: 22px;
            background: var(--primary-color);
            cursor: pointer;
            border-radius: 50%;
        }

        /* --- 特定元素样式 --- */
        .led-indicator {
            width: 25px;
            height: 25px;
            background-color: #e0e0e0;
            border-radius: 50%;
            transition: background-color 0.3s, box-shadow 0.3s;
            margin-right: 15px;
        }
        .led-indicator.on {
            background-color: var(--success-color);
            box-shadow: 0 0 10px var(--success-color);
        }

        #video-container {
            width: 100%;
            background-color: #000;
            border-radius: 8px;
            overflow: hidden;
        }
        video { width: 100%; display: block; }
        .video-controls { display: flex; justify-content: center; gap: 10px; margin-top: 15px; }

        .status-indicator {
            width: 18px;
            height: 18px;
            border-radius: 50%;
        }
        .status-indicator.connected { background-color: var(--success-color); }
        .status-indicator.disconnected { background-color: var(--danger-color); }
        .status-indicator.retrieving { background-color: var(--warning-color); }

        .alarm {
            padding: 15px;
            background-color: var(--danger-color);
            color: white;
            border-radius: 5px;
            margin-top: 10px;
            display: none;
            text-align: center;
        }
        .alarm strong { margin-right: 10px; }

        #system-status-bar {
            position: fixed;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 0.9em;
            backdrop-filter: blur(5px);
        }
    </style>
</head>
<body>

    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <button class="nav-button active" data-page="control">设备控制</button>
        <button class="nav-button" data-page="video">视频监控</button>
        <button class="nav-button" data-page="sensors">传感器数据</button>
        <button class="nav-button" data-page="status">系统状态</button>
    </nav>

    <!-- 页面内容容器 -->
    <div class="container">

        <!-- 页面1: 设备控制 -->
        <div id="control" class="page active">
            <div class="module">
                <div class="module-title">LED 灯光控制</div>
                <div class="control-item">
                    <label>开关</label>
                    <div style="display: flex; align-items: center;">
                        <div id="led-indicator" class="led-indicator"></div>
                        <button id="led-toggle">切换</button>
                    </div>
                </div>
                <div class="control-item">
                    <label>亮度</label>
                    <input type="range" min="0" max="100" value="50" class="slider" id="led-brightness">
                    <span id="led-brightness-value">50%</span>
                </div>
            </div>
            <div class="module">
                <div class="module-title">电机控制</div>
                <div class="control-item">
                    <label>转速与方向</label>
                    <input type="range" min="-100" max="100" value="0" class="slider" id="motor-speed">
                    <span id="motor-speed-value">0% (停止)</span>
                </div>
            </div>
        </div>

        <!-- 页面2: 视频监控 -->
        <div id="video" class="page">
            <div class="module">
                <div class="module-title">实时监控</div>
                <div id="video-container">
                    <video id="video-stream" autoplay playsinline></video>
                </div>
                <div class="video-controls">
                    <button id="play-video">开始播放</button>
                    <button id="record-video">录制</button>
                    <button id="snap-photo">拍照</button>
                </div>
            </div>
        </div>

        <!-- 页面3: 传感器数据 -->
        <div id="sensors" class="page">
            <div class="module">
                <div class="module-title">环境数据</div>
                <div class="sensor-data">
                    <span>🌡️ 温度</span>
                    <span id="temp-value">-- °C</span>
                </div>
                <div class="sensor-data">
                    <span>💧 湿度</span>
                    <span id="humidity-value">-- %</span>
                </div>
                <div class="sensor-data">
                    <span>☀️ 光照强度</span>
                    <span id="light-value">-- Lux</span>
                </div>
            </div>
            <div class="module">
                 <div class="module-title">安全监控</div>
                 <div class="sensor-data">
                    <span>🏃 红外传感器</span>
                    <span id="ir-value">未检测到物体</span>
                </div>
                <div class="sensor-data">
                    <span>🔔 蜂鸣器状态</span>
                    <span id="buzzer-status">关闭</span>
                </div>
                <div id="alarm-box" class="alarm">
                    <strong>警报!</strong> <span id="alarm-reason"></span>
                </div>
            </div>
        </div>

        <!-- 页面4: 系统状态 -->
        <div id="status" class="page">
            <div class="module">
                <div class="module-title">设备连接状态</div>
                <div class="status-item">
                    <span>LED 灯</span>
                    <div id="led-status" class="status-indicator"></div>
                </div>
                <div class="status-item">
                    <span>电机</span>
                    <div id="motor-status" class="status-indicator"></div>
                </div>
                <div class="status-item">
                    <span>温湿度传感器</span>
                    <div id="dht-status" class="status-indicator"></div>
                </div>
                <div class="status-item">
                    <span>光敏传感器</span>
                    <div id="light-sensor-status" class="status-indicator"></div>
                </div>
                <div class="status-item">
                    <span>蜂鸣器</span>
                    <div id="buzzer-device-status" class="status-indicator"></div>
                </div>
                <div class="status-item">
                    <span>红外传感器</span>
                    <div id="ir-sensor-status" class="status-indicator"></div>
                </div>
                 <div class="status-item">
                    <span>摄像头</span>
                    <div id="camera-status" class="status-indicator"></div>
                </div>
            </div>
        </div>

    </div>

    <!-- 底部全局状态栏 -->
    <div id="system-status-bar">系统: <span>初始化中...</span> | 传感器: <span>等待获取...</span></div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // --- 页面切换逻辑 ---
        const navButtons = document.querySelectorAll('.nav-button');
        const pages = document.querySelectorAll('.page');

        function showPage(pageId) {
            pages.forEach(page => {
                page.classList.remove('active');
            });
            navButtons.forEach(button => {
                button.classList.remove('active');
            });

            document.getElementById(pageId).classList.add('active');
            document.querySelector(`.nav-button[data-page="${pageId}"]`).classList.add('active');
        }

        navButtons.forEach(button => {
            button.addEventListener('click', () => {
                showPage(button.dataset.page);
            });
        });

        // 默认显示第一个页面
        showPage('control');


        // --- 模拟设备连接状态 ---
        const deviceStatuses = {
            'led-status': true,
            'motor-status': true,
            'dht-status': false,
            'light-sensor-status': true,
            'buzzer-device-status': true,
            'ir-sensor-status': false,
            'camera-status': true
        };

        function updateDeviceStatus() {
            for (const deviceId in deviceStatuses) {
                const statusIndicator = document.getElementById(deviceId);
                if (deviceStatuses[deviceId]) {
                    statusIndicator.classList.add('connected');
                    statusIndicator.classList.remove('disconnected');
                } else {
                    statusIndicator.classList.remove('connected');
                    statusIndicator.classList.add('disconnected');
                }
            }
        }

        // --- LED 控制 ---
        const ledToggle = document.getElementById('led-toggle');
        const ledIndicator = document.getElementById('led-indicator');
        ledToggle.addEventListener('click', () => {
            ledIndicator.classList.toggle('on');
        });

        const ledBrightnessSlider = document.getElementById('led-brightness');
        const ledBrightnessValue = document.getElementById('led-brightness-value');
        ledBrightnessSlider.addEventListener('input', () => {
            const brightness = ledBrightnessSlider.value;
            ledBrightnessValue.textContent = `${brightness}%`;
            if (ledIndicator.classList.contains('on')) {
                ledIndicator.style.opacity = brightness / 100;
            }
        });

        // --- 电机控制 ---
        const motorSpeedSlider = document.getElementById('motor-speed');
        const motorSpeedValue = document.getElementById('motor-speed-value');
        motorSpeedSlider.addEventListener('input', () => {
            const speed = motorSpeedSlider.value;
            let direction = "停止";
            if (speed > 0) direction = "正转";
            if (speed < 0) direction = "反转";
            motorSpeedValue.textContent = `${Math.abs(speed)}% (${direction})`;
        });

        // --- 模拟传感器数据更新 ---
        const tempValue = document.getElementById('temp-value');
        const humidityValue = document.getElementById('humidity-value');
        const lightValue = document.getElementById('light-value');
        const irValue = document.getElementById('ir-value');
        const systemStatusText = document.querySelector('#system-status-bar span:first-of-type');
        const sensorStatusText = document.querySelector('#system-status-bar span:last-of-type');

        setInterval(() => {
            sensorStatusText.textContent = '正在获取...';
            document.getElementById('dht-status').classList.add('retrieving');
            document.getElementById('light-sensor-status').classList.add('retrieving');

            setTimeout(() => {
                const temp = (20 + Math.random() * 15).toFixed(1);
                const humidity = (40 + Math.random() * 30).toFixed(1);
                if (deviceStatuses['dht-status']) {
                    tempValue.textContent = temp + ' °C';
                    humidityValue.textContent = humidity + ' %';
                } else {
                    tempValue.textContent = "N/A";
                    humidityValue.textContent = "N/A";
                }

                const light = Math.floor(Math.random() * 1200);
                if (deviceStatuses['light-sensor-status']) {
                    lightValue.textContent = light + ' Lux';
                } else {
                     lightValue.textContent = "N/A";
                }

                if (deviceStatuses['ir-sensor-status']) {
                    irValue.textContent = Math.random() > 0.8 ? "检测到物体" : "未检测到物体";
                } else {
                    irValue.textContent = "N/A";
                }

                checkAlarms(temp, humidity, light);
                sensorStatusText.textContent = '获取成功';
                document.getElementById('dht-status').classList.remove('retrieving');
                document.getElementById('light-sensor-status').classList.remove('retrieving');
            }, 500);
        }, 3000);

        // --- 报警逻辑 ---
        const alarmBox = document.getElementById('alarm-box');
        const alarmReason = document.getElementById('alarm-reason');
        const buzzerStatus = document.getElementById('buzzer-status');
        const TEMP_HIGH = 30;
        const HUMIDITY_HIGH = 65;
        const LIGHT_HIGH = 1000;

        function checkAlarms(temp, humidity, light) {
            let alarmMsg = '';
            if (temp > TEMP_HIGH) alarmMsg += '温度过高; ';
            if (humidity > HUMIDITY_HIGH) alarmMsg += '湿度过高; ';
            if (light > LIGHT_HIGH) alarmMsg += '光照过强; ';

            if (alarmMsg) {
                alarmBox.style.display = 'block';
                alarmReason.textContent = alarmMsg;
                buzzerStatus.textContent = '报警中';
            } else {
                alarmBox.style.display = 'none';
                buzzerStatus.textContent = '关闭';
            }
        }

        // --- 视频模块 ---
        const video = document.getElementById('video-stream');
        const playBtn = document.getElementById('play-video');

        playBtn.addEventListener('click', () => {
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
                    video.srcObject = stream;
                    video.play();
                }).catch(function(error) {
                    alert("无法访问摄像头: " + error);
                });
            } else {
                alert("浏览器不支持getUserMedia API");
            }
        });
        
        // --- 初始状态更新 ---
        updateDeviceStatus();
        systemStatusText.textContent = '运行中';
    });
</script>

</body>
</html>